<!-- 我的发布页面：展示用户发布的宠物的信息 -->
<template>
  <div class="post-box">
    <div class="post-table">
      <el-table :data="paginatedPostPets" border style="width: 100%">
        <el-table-column prop="petName" label="宠物名称" />
        <el-table-column prop="gender" label="宠物性别" />
        <el-table-column prop="age" label="宠物年龄" />
        <el-table-column prop="breed" label="宠物品种" />
        <el-table-column prop="region" label="宠物地区" />

        <!-- 疫苗接种 -->
        <el-table-column label="疫苗接种">
          <template #default="{ row }">
            <el-tag :type="row.vaccinated === '1' ? 'primary' : 'warning'" disable-transitions>
              {{ row.vaccinated === '1' ? '已接种' : '未接种' }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 健康状态 -->
        <el-table-column label="健康状态">
          <template #default="{ row }">
            <el-tag :type="row.healthy === '1' ? 'success' : 'danger'" disable-transitions>
              {{ row.healthy === '1' ? '健康' : '患病' }}
            </el-tag>
          </template>
        </el-table-column>


        <!-- 发布时间 -->
        <el-table-column label="发布时间">
          <template #default="{ row }">
            {{ new Date(row.publish_time).toISOString().slice(0, 16).replace('T', ' ') }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器 -->
    <el-pagination 
    :page-size="pageSize" 
    :current-page="currentPage" 
    :total="allUserPostPets.length"
    @current-change="handlePageChange" 
    layout="prev, pager, next" 
    class="pagination" 
    />
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores/user";
import { getUserPostPetsAPI } from "@/api/user";
import { onMounted, ref, computed } from "vue";

// 获取用户ID
const userStore = useUserStore();
const id = userStore.user.user_id;

// 获取并存储用户发布的宠物列表信息
const allUserPostPets = ref([]);

const pageSize = 8; // 每页显示的条数
const currentPage = ref(1); // 当前页码

// 获取用户发布的宠物数据
const getUserPostPets = async () => {
  const res = await getUserPostPetsAPI(id);
  allUserPostPets.value = res.data.items;
};

// 分页后的宠物数据
const paginatedPostPets = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  const end = start + pageSize;
  return allUserPostPets.value.slice(start, end);
});

// 处理页码变化
const handlePageChange = (newPage: number) => {
  currentPage.value = newPage;
};

onMounted(() => {
  getUserPostPets();
});
</script>


<style lang="scss" scoped>
.post-box {
  width: 970px;
  margin-left: 30px;
  padding: 10px;
  background: #FAFAFA;;
  // border: 1px solid black;
  position: relative;
}

.pagination {
  position: absolute;
  bottom: 20px;
  /* 距离底部10px */
  right: 20px;
  /* 距离右侧10px */
}
</style>